<template>
  <!-- 在售商品统计 折线图 -->
  <div class="card_box">
    <div class="flex card_flex">
    <div>
          <span style="width: 0px;height: 10px;border: 1px solid #7998f6;margin-right: 6px;"></span>
          <span style="font-size: 16px;font-weight: 500;">在售商品统计</span>
    </div>
    <div class="time_box">
      <span class="timers">时间</span>  
      <el-date-picker
      style="width: 260px;"
        v-model="timerange"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button style="margin-left:10px;background: #5982ff;border-color:#5982ff" type="primary" @click="getData">搜索</el-button>
      <el-button icon="el-icon-refresh"  @click="resetQuery">重置/刷新</el-button>
    </div>
     </div>
    <div id="tuiguagChartsline2" ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import EleResize from '@/utils/esresize';

import { getAppTuiguangShuju } from "@/api/tenantApis/indexStatistics.js";
export default {
  name: "",
  data() {
    return {
      myChart1: null,
      xData: [
      "2024-06-01",
        "2024-06-02",
        "2024-06-03",
        "2024-06-04",
        "2024-06-04",
        "2024-06-04",
        "2024-06-04",
        "2024-06-04",
        "2024-06-04",
      ], // 日期
      quantityList: [140, 232, 101, 264, 90, 340, 250], // 数量
      amountList: [234, 284, 186, 654, 422, 896, 268, 324, 183],   // 金额
      timerange: []
    };
  },
  created() {},
  mounted() {
    // 默认一月时间
    // 获取最近三十天的日期范围
    const endDate = new Date();
    const startDate = new Date();
    startDate.setDate(startDate.getDate() - 30);

    const formatDate = (date) => {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    };

    this.timerange = [formatDate(startDate), formatDate(endDate)];

    this.$nextTick(() => {
      var chartDom = document.getElementById("tuiguagChartsline2");
      this.myChart1 = echarts.init(chartDom);
        var resizeDiv = document.getElementById('tuiguagChartsline2')
            EleResize.on(resizeDiv, () => {
                this.myChart1.resize()
            })

      // this.getData();
      setTimeout(() => {
        this.initCharts1();
      }, 1000);
    });
  },
  methods: {
    resetQuery() {

    },
    getData() {
      const obj = {
        xyType: "huawei",
        startTime:'',
        endTime: '',
      };
      if(this.timerange.length==2){
        obj.startTime = this.timerange[0]+' 00:00:00'
        obj.endTime = this.timerange[1]+' 23:59:59'
      }else{
        obj.startTime = ''
        obj.endTime = ''
      }
      getAppTuiguangShuju(obj).then((res) => {
        this.xData = [];
        this.quantityList = [];
        this.amountList = [];
        if (res.data && res.data.length) {
          res.data.forEach((r) => {
            this.xData.push(r.date);
            this.quantityList.push(r.quantity);
            this.amountList.push(r.amount);
          });
        }
        this.initCharts1();
      });
    },
    initCharts1() {
      const colors = [
        "rgb(39, 174, 96)",   // 数量-绿色
        "rgb(52, 120, 246)"   // 金额-蓝色
      ];
      let option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "#fff",
          borderColor: "#eee",
          borderWidth: 1,
          textStyle: { color: "#333" },
          formatter: (params) => {
            let str = params[0].axisValue + "<br/>";
            params.forEach(item => {
              str += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background:${item.color}"></span>`;
              str += `${item.seriesName}: <b>${item.value}${item.seriesName === '在售商品(金额)' ? '元' : ''}</b><br/>`;
            });
            return str;
          }
        },

        color: colors,
        legend: {
          itemHeight: 10,
          itemWidth:10,
          data: [
            { name: "在售商品(数量)", textStyle: { color: colors[0] ,borderRadius: 8} ,icon: 'roundRect'},
            { name: "在售商品(金额)", textStyle: { color: colors[1] ,borderRadius: 8} ,icon: 'roundRect'},
          ],
          bottom: 0,
          left: "center"
        },
        grid: { left: 50, right: 50, top: 40, bottom: 46 },
        xAxis: {
          type: "category",
            boundaryGap:false,
          data: this.xData,
          axisLine: { lineStyle: { color: "#EAEBF0" } },
          axisLabel: { color: "#333" }
        },
        yAxis: [
          {
            type: "value",
            name: "(个)",
            position: "left",
               axisLine: { lineStyle: { color: "#f1f1f1" } }, // 轴线颜色
            axisLabel: { color: colors[0] },
            splitLine: { lineStyle: { color: "#EAEBF0", type: "dotted" } },
            nameTextStyle: { color: colors[0]  }, // y轴名称颜色
          },
          {
            type: "value",
            name: "(元)",
            position: "right",
             axisLine: { lineStyle: { color: "#fff" } }, // 轴线颜色
             axisLabel: { color: colors[1]},
           
            nameTextStyle: { color: colors[1]  }, // y轴名称颜色
            splitLine: { show: false }
          }
        ],
        series: [
          {
           
            showSymbol:false,
            name: "在售商品(数量)",
            type: "line",
            yAxisIndex: 0,
            smooth: true,
            data: this.quantityList,
            areaStyle: {
              opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(112, 226, 201)" },
          { offset: 1, color: "rgba(205, 233, 255)" }
        
        ])
            }
          },
          {
            showSymbol:false,
            name: "在售商品(金额)",
            type: "line",
            yAxisIndex: 1,
            smooth: true,
            data: this.amountList,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 {
            offset: 0,
            color: 'rgb(152, 184, 255)'
          },
                 {
            offset: 1,
            color: 'rgb(205, 233, 255)'
          }
              ])
            }
          }
        ]
      };
      this.myChart1 && this.myChart1.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
.card_box{
  position: relative;
  .flex {
    
  }
  .time_box{
  
  }
}
#tuiguagChartsline2 {
  width: 100%;
  height: 350px;
}
.timers {
    font-size: 14px;
    margin-right: 6px;
}
.card_flex {
  justify-content: space-between;
  align-items: center;
}
</style>
